<template>
  <view>
    <form @submit="formSubmit" report-submit="true">
      <view class="user-info-container">
        <view class="user-info-item">
          <view class="user-info-label">头像</view>
          <button class="dawdaw" @chooseavatar="onChooseAvatar" open-type="chooseAvatar">
            <image
              v-if="userInfo.avatar || newAvatar"
              :src="newAvatar ? (newAvatar.includes('https') ? newAvatar : getImg + newAvatar) : userInfo.avatar.includes('http') ? userInfo.avatar : getImg + userInfo.avatar"
              class="avatar-image"
            ></image>

            <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/alter_20250321104200A006.png" class="edit-icon"></image>
          </button>
        </view>
        <view class="user-info-item">
          <view class="user-info-label">昵称</view>
          <view class="user-info-input"><input name="nickname" type="nickname" :value="userInfo.nickname" /></view>
        </view>
        <view class="user-info-item">
          <view class="user-info-label">手机号码</view>

          <view class="user-info-input">
            <view type="text" placeholder="请输入手机号码" open-type="getPhoneNumber" class="disabled-input" disabled>
              {{ userInfo.phone }}
              <!--  <button class="dawdjnhuhie" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :value="userInfo.phone" disabled /> -->
            </view>
            <!-- <view v-else>
                <text class="bind-text" @click="bindPhone">点击绑定手机号</text>
                <text class="iconfont icon-xiangyou"></text>
              </view> -->
          </view>
        </view>
        <view class="user-info-item">
          <view class="user-info-label">ID号</view>
          <view class="user-info-input">
            <input type="text" :value="uid" disabled="true" class="disabled-input" />
            <text class="iconfont icon-suozi"></text>
          </view>
        </view>
        <!-- <navigator style="color: #fc4141; font-size: 13px; display: inline"
                url="/pages_h5/myCenter/components/yinsizhengce">《隐私政策》</navigator>
              <navigator style="color: #fc4141; font-size: 13px; display: inline"
                url="/pages_h5/myCenter/components/yonghuxieyi">《平台用户服务协议》</navigator>
              <navigator style="color: #fc4141; font-size: 13px; display: inline"
                url="/pages_h5/myCenter/components/tousujubao">《智享优圈-投诉举报》</navigator> -->
        <view class="user-info-item" @click="navito('/pages_h5/myCenter/components/yinsizhengce')">
          <view class="user-info-label">隐私政策</view>
          <view class="user-info-input">
            <u-icon name="arrow-right" size="38"></u-icon>
          </view>
        </view>
        <view class="user-info-item" @click="navito('/pages_h5/myCenter/components/yonghuxieyi')">
          <view class="user-info-label">平台用户服务协议</view>
          <view class="user-info-input">
            <u-icon name="arrow-right" size="38"></u-icon>
          </view>
        </view>
        <view class="user-info-item" @click="navito('/pages_h5/myCenter/components/tousujubao')">
          <view class="user-info-label">投诉举报</view>
          <view class="user-info-input">
            <u-icon name="arrow-right" size="38"></u-icon>
          </view>
        </view>
        <button class="save-button" formType="submit">保存修改</button>
        <button class="logout-button" @click="logOut">退出登录</button>
      </view>
    </form>
  </view>
</template>

<script>
import { userEdit, getLogout, logOutToken } from "../../../utils/api/local";
import { IMG_URL } from "../../../config/index.js";
export default {
  data() {
    return {
      memberInfo: {},
      loginType: "h5", //app.globalData.loginType
      userIndex: 0,
      newAvatar: "",
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      getImg: IMG_URL,
      userInfo: "",
      uid: "",
    };
  },
  onLoad() {
    if (this.userInfo == "您的登录已过期，请重新登录") {
      uni.clearStorage();
      uni.switchTab({
        url: "/pages_h5/myCenter/index",
      });
    }
  },
  onShow() {
    this.userInfo = uni.getStorageSync("userInfo");
    this.uid = uni.getStorageSync("uid");
  },
  methods: {
    getPhoneNumber(e) {
      if (e.detail.code && e.detail.errMsg == "getPhoneNumber:ok") {
        getUserPhoneNumber(e.detail).then((res) => {
          if (res.code == 200 && res.data.errmsg == "ok") {
            let that = this;
            this.userInfo.phone = res.data.phone_info.phoneNumber;
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
      }
    },
    navito(url) {
      uni.navigateTo({ url });
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e;
    },
    /**
     * 小程序设置
     */
    Setting: function () {
      uni.openSetting({
        success: function (res) {
          console.log(res.authSetting);
        },
      });
    },
    /**
     * 退出登录
     *
     */
    outLogin: function () {
      let that = this;
      if (that.loginType == "h5") {
        uni.showModal({
          title: "提示",
          content: "确认退出登录?",
          success: function (res) {
            if (res.confirm) {
              getLogout()
                .then((res) => {
                  that.$store.commit("LOGOUT");
                  uni.switchTab({
                    url: "/pages/index_tabs/local_life/index",
                  });
                })
                .catch((err) => {
                  console.log(err);
                });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
    outChange() {
      uni.showModal({
        title: "提示",
        content: "确认切换账号?",
        success: function (res) {
          if (res.confirm) {
            uni.reLaunch({
              url: "/pages/users/login/index",
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    onChooseAvatar(e) {
      console.log(e);
      var that = this;
      uni.uploadFile({
        url: "https://www.wantongkonggu.cn//api/frontApph7/frontCommon/uploadTuPian?model=maintain&pid=0",
        filePath: e.detail.avatarUrl,
        name: "multipart",
        formData: {
          model: "maintain",
          pid: 0,
        },
        success: function (uploadRes) {
          const data = JSON.parse(uploadRes.data);
          that.newAvatar = data.fileName;
        },
        fail: function (err) {
          console.error("上传失败", err);
        },
      });
    },
    /**
     * 上传文件
     *
     */
    /*     uploadpic: function () {
      let that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: function (res) {
          uni.uploadFile({
            url: "https://www.wantongkonggu.cn//api/frontApph7/frontCommon/uploadTuPian?model=maintain&pid=0",
            filePath: res.tempFilePaths[0],
            name: "multipart",
            formData: {
              model: "maintain",
              pid: 0,
            },
            success: function (uploadRes) {
              const data = JSON.parse(uploadRes.data);
              that.newAvatar = data.fileName;
            },
            fail: function (err) {
              console.error("上传失败", err);
            },
          });
        },
        fail: function (err) {
          console.error("选择图片失败", err);
        },
      });
    }, */

    /**
     * 提交修改
     */
    formSubmit: function (e) {
      let that = this,
        value = e.detail.value;
      if (!value.nickname)
        return uni.showToast({
          title: "用户姓名不能为空",
          icon: "none",
        });
      value.avatar = that.newAvatar ? that.newAvatar : that.userInfo.avatar;
      value.phone = that.userInfo.phone;
      value.account = that.userInfo.phone;
      userEdit(value)
        .then((res) => {
          // that.$store.commit("changInfo", {
          //   amount1: "avatar",
          //   amount2: that.newAvatar,
          // });
          if (res.code == 200) {
            uni.showToast({
              title: "修改成功",
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
                animationType: "pop-out",
                animationDuration: 200,
              });
            }, 1500);
          }
        })
        .catch((msg) => {
          return uni.showToast({
            title: msg || "保存失败，您并没有修改",
            icon: "none",
          });
        });
    },
    /**
     * logOut退出登录
     */
    logOut() {
      uni.showModal({
        title: "提示",
        content: "确认解绑微信?",
        success: (res) => {
          if (res.confirm) {
            logOutToken({ uid: this.uid })
              .then((res) => {
                // this.$store.commit("LOGOUT");
                uni.clearStorageSync();
                uni.reLaunch({
                  url: "/pages_h5/index/index",
                });
              })
              .catch((err) => {
                uni.showToast({
                  title: err.message || "退出失败,请使用微信登录或联系管理员",
                  icon: "none",
                });
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.user-info-container {
  margin: 30rpx 0;
  background-color: #fff;
  padding: 30rpx;
}

.user-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #f2f2f2;
}

.user-info-label {
  font-size: 32rpx;
  color: #282828;
}

.user-info-input {
  display: flex;
  text-align: right;
  align-items: center;
}

.disabled-input {
  color: #868686;
}

.avatar-image {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}

.edit-icon {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.save-button {
  font-size: 32rpx;
  color: #fff;
  width: 690rpx;
  height: 90rpx;
  border-radius: 50rpx;
  background-color: #fa642f;
  margin-top: 76rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-button {
  font-size: 32rpx;
  color: #fff;
  width: 690rpx;
  height: 90rpx;
  border-radius: 45rpx;
  background-color: #ff3333;
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.dawdaw {
  background: none;
  padding: 0;
  border: none !important;
  width: 90rpx;
  height: 90rpx;
  margin: 0;
}
</style>
